<template>
    <div>
    <ul>
        <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <button @click="changeList">改变数组</button>
</div>
</template>

<script setup>
import {ref, reactive} from 'vue'
const list = ref([1, 3 ,6, 4, 5])
// Vue2通过索引值去修改数组，这样是不能达到响应式的。
    // Vue3是通过proxy修改数组，这样是可以达到响应式的，动态修改视图。
    // Vue3通过索引值去修改数组，可以达到响应式，动态修改视图。因为是proxy。
    // list[5] = 7;
    // list.value.push(8,9);  // 数组末尾添加元素
    // list.value.pop();      // 数组末尾删除元素
    // shift()            // 删除第一位元素
    // unshift()          // 给数组首位添加元素

    // splice()           // 插入删除替换
    // 删除元素
    // 第一个参数：表示开始插入或者开始删除的元素下标
    // 第二个参数：表示要要删除几个元素（如果没有传，删除后面所有的元素）
    // list.value.splice(1,2); // 删除3, 6，（0开始）从1下标，开始删除两位。
    // list.value.splice(1); // （0开始）从1下标，开始删除后面所有。
    
    // 插入元素
    // 第一个参数：表示开始插入或者开始删除的元素下标
    // 第二个参数：0，可以理解为也就是不删除元素。
    // list.value.splice(1,0,7,8,9);// （0开始）从1下标，开始删除两位。0表示插入,插入789三个元素。


    // 替换元素
    // 第一个参数：表示开始插入或者开始删除或者开始替换的元素下标
    // 第二个参数：需要替换几个元素
    // 替换和删除的区别。删除只有两个参数，替换大于等于三个参数.
    // list.value.splice(1,3,7,8,9);// （0开始）从1下标，开始替换三位。替换789三个元素。

    // 不要忘记加value
    list.value.value.sort();
    // sort()
    // reverse()
    list.value.value.reverse();
</script>